<template>
  <div class="common-table-tag">
    <div class="common-table-tag-list">
      <div class="c-t-t-list" v-for="item in list">
        <el-popover
          v-if="item.showTips"
          :placement="placement"
          popper-class="el-pop-tag-item"
          :trigger="trigger"
        >
          <div class="c-t-t-list">
            <el-tag :type="type" :size="size" :effect="effect">
              {{ keyValue ? item[keyValue] : item.label }}
            </el-tag>
            <svg class="svg-icon iconfont" v-if="isHot">
              <use :xlink:href="'#icon-hot'"></use>
            </svg>
          </div>
          <el-tag
            class="c-t-t-l-tag"
            v-if="item.showTips"
            slot="reference"
            :type="type"
            :size="size"
            :effect="effect"
          >
            {{ keyValue ? item[keyValue] : item.label }}
          </el-tag>
        </el-popover>
        <el-tag
          v-else
          class="c-t-t-l-tag"
          :type="type"
          :size="size"
          :effect="effect"
        >
          {{ keyValue ? item[keyValue] : item.label }}
        </el-tag>
        <svg class="svg-icon iconfont" v-if="isHot">
          <use :xlink:href="'#icon-hot'"></use>
        </svg>
      </div>
      <div class="c-t-t-list" v-if="isHidden">
        <el-popover
          :placement="placement"
          popper-class="el-pop-tag-list"
          :trigger="trigger"
        >
          <div class="c-t-t-list">
            <div class="c-t-t-l-item" v-for="item in data">
              <el-tag
                class="c-t-t-l-tags"
                :type="type"
                :size="size"
                :effect="effect"
              >
                {{ keyValue ? item[keyValue] : item }}
              </el-tag>
              <svg class="svg-icon iconfont" v-if="isHot">
                <use :xlink:href="'#icon-hot'"></use>
              </svg>
            </div>
          </div>
          <el-tag
            class="c-t-t-l-tag"
            slot="reference"
            :type="type"
            :size="size"
            :effect="effect"
            >...
          </el-tag>
        </el-popover>
      </div>
    </div>
  </div>
</template>

<script>
import { deepClone } from "@/utils";

export default {
  name: "index",
  props: {
    data: {
      type: Array,
      default: () => null,
    },
    keyValue: {
      type: String,
      default: "",
    },
    type: {
      //tag类型
      type: String,
      default: "danger",
    },
    size: {
      //tag大小
      type: String,
      default: "small",
    },
    effect: {
      //主题
      type: String,
      default: "light",
    },
    index: {
      type: Number,
      default: () => null,
    },
    placement: {
      //popover弹出位置
      type: String,
      default: "top",
    },
    trigger: {
      //popover弹出形式
      type: String,
      default: "hover",
    },
    isHot: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      list: [],
      isHidden: false,
    };
  },
  watch: {
    data: {
      handler(newValue, oldValue) {
        this.setPopover();
      },
    },
  },
  methods: {
    setPopover() {
      this.isHidden = false;

      this.$nextTick(() => {
        // this.list = []

        if (this.keyValue) {
          this.list = [...this.data];
        } else {
          this.list = this.data.reduce((r, c) => {
            r.push({
              label: c,
              showTips: false,
            });
            return r;
          }, []);
        }
        let container = document.getElementsByClassName("common-table-tag-list")[this.index].getBoundingClientRect(),
          tagsList,
          idx;
        if (this.list && this.list.length > 0) {
          this.list.forEach((f) => {
            f.showTips = false;

            let span = document.createElement("span");
            span.setAttribute("class", "list-tag-item");
            span.style.fontSize = "12px";
            span.innerText = this.keyValue ? f[this.keyValue] : f.label;
            document.getElementsByClassName("layout-main-container")[0].appendChild(span);
            f.showTips = span.offsetWidth > 46;
          });
        }

        let spanList = document.getElementsByClassName("list-tag-item");
        if (spanList.length > 0) {
          for (let k = 0; k < spanList.length; k++) {
            spanList[k].remove();
          }
        }

        setTimeout(() => {
          tagsList = document.getElementsByClassName("common-table-tag-list")[this.index].children
          for (let i = 0; i < tagsList.length; i++) {
            let tag = tagsList[i].getBoundingClientRect();
            if (tag.x + tag.width > container.x + container.width) {
              idx = i;
              break;
            }
          }
          if (idx && idx < 3) {
            this.list.splice(idx, this.list.length);
            this.isHidden = true;
          } else if (this.list.length > 3) {
            this.list.splice(2, this.list.length);
            this.isHidden = true;
          }
        })

      });
    },
  },
  mounted() {
    this.setPopover();
  },
};
</script>

<style scoped lang="scss">
.common-table-tag {
  width: 100%;
  display: flex;
  /*overflow: hidden;*/

  .common-table-tag-list {
    width: 100%;
    display: flex;
    overflow: hidden;

    .c-t-t-list {
      margin-right: 8px;
      display: flex;
      align-items: center;
      position: relative;


      .c-t-t-l-tag {
        max-width: 60px;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      ::v-deep .el-popover__reference-wrapper {
        display: flex;
      }

      .iconfont {
        position: absolute;
        font-size: 12px;
        top: 0;
        right: -2px;
        width: 10px;
        height: 10px;
      }
    }
  }
}
</style>

<style lang="scss">
.list-tag-item {
  position: fixed;
  top: -50px;
  left: 0;
  z-index: 0;
  white-space: nowrap;
}

.el-popover {
  .c-t-t-list {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
